/* eslint-disable react-native/no-inline-styles */
/* eslint-disable react/no-unstable-nested-components */
import React, {useState, useEffect} from 'react';
import {Colors, Text, View, Dialog} from 'react-native-ui-lib';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import {connect} from 'react-redux';
import {useNavigation} from '@react-navigation/native';
import Home from '@/pages/Home';
import Mine from '@/pages/Mine';
import Mission from '@/pages/Mission';
import Report from '@/pages/Report';

const Tab = createMaterialBottomTabNavigator();

const nameConfig = {
  Home: '工作台',
  Mission: '任务',
  Audit: '审批',
  Report: '日报',
  Mine: '我的',
};

function BottomTabs({appTheme}) {
  // const navigation = useNavigation();
  return (
    <>
      <Tab.Navigator
        lazy={true}
        initialRouteName="Home"
        activeColor={Colors.primaryColor}
        inactiveColor={Colors.colorTextBase}
        backBehavior={'none'}
        shifting={true}
        compact={true}
        renderLabel={props => {
          return (
            <Text
              style={{color: props.color, textAlign: 'center', marginTop: -12}}>
              {nameConfig[props.route.name]}
            </Text>
          );
        }}
        barStyle={{
          backgroundColor: Colors.backgroundColor,
          height: 60,
        }}
        style={{backgroundColor: Colors.backgroundColor}}
        // onTabLongPress={({route}) => {
        //   /* ----- */
        //   navigation.navigate('Projects');
        // }}
      >
        <Tab.Screen
          name="Home"
          component={Home}
          options={{
            tabBarLabel: '工作台',
            tabBarIcon: ({color}) => (
              <MaterialCommunityIcons
                name="apps-box"
                color={color}
                size={23}
                style={{marginTop: -6}}
              />
            ),
          }}
        />
        <Tab.Screen
          name="Mission"
          component={Mission}
          options={{
            tabBarLabel: '任务',
            tabBarIcon: ({color}) => (
              <MaterialCommunityIcons
                name="format-list-bulleted-type"
                color={color}
                size={23}
                style={{marginTop: -6}}
              />
            ),
          }}
        />
        <Tab.Screen
          name="Report"
          component={Report}
          options={{
            tabBarLabel: '首页',
            tabBarIcon: ({color}) => (
              <MaterialCommunityIcons
                name="calendar-month"
                color={color}
                size={23}
                style={{marginTop: -6}}
              />
            ),
          }}
        />

        <Tab.Screen
          name="Mine"
          component={Mine}
          options={{
            tabBarLabel: '我的',
            tabBarIcon: ({color}) => (
              <View>
                <View
                  style={{
                    width: 4,
                    height: 4,
                    position: 'absolute',
                    right: 0,
                    top: -10,
                    borderRadius: 4,
                  }}
                  bg-red10
                />
                <MaterialCommunityIcons
                  name="account-circle"
                  color={color}
                  size={23}
                  style={{marginTop: -6}}
                />
              </View>
            ),
          }}
        />
      </Tab.Navigator>
    </>
  );
}

const mapStateToProps = state => {
  return {
    appTheme: state.appTheme,
  };
};

export default connect(mapStateToProps)(BottomTabs);
